<template>
  <div>文章管理</div>
  <div class="cart" v-for="item in listArr" :key="item.id">
    <el-card class="inp">
      <span class="c">{{ item.title }}</span>
      <span class="c1">{{ item.content }}</span>
      <span>是否公开</span>
      <el-switch
        v-model="item.status"
        size="small"
        class="btn_1"
        @click="F(item.id, item.status)"
      />
      <el-button type="success" class="btn_2" @click="editFn(item.id)"
        >编辑</el-button
      >
      <el-button type="warning" class="btn_2" @click="delFn(item.id)"
        >删除</el-button
      >
    </el-card>
  </div>

  <el-dialog v-model="centerDialogVisible" title="编辑页" width="500" center>
    <p>文章:<input type="text" v-model="list.title" /></p>
    <p>内容:<input type="text" v-model="list.content" /></p>
    <P>状态:<el-switch v-model="status" size="small" /></P>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="ok()">确定</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, reactive } from "vue";
const centerDialogVisible = ref(false);
import { editReq, listReq, FnReq } from "@/api/list";
import { delReq } from "@/api/list";
const listArr = ref([]);
const list = reactive({});
const status = ref(false);
//列表
function todolist() {
  listReq().then((r) => {
    console.log(r.data);
    listArr.value = r.data;
  });
}
todolist();
//删除
function delFn(id) {
  delReq(id).then((r) => {
    console.log(r.data);
    todolist();
  });
}
let id1 = ref(0);
//编辑
function editFn(id) {
  centerDialogVisible.value = true;
  id1.value = id;
}
//确定
function ok() {
  centerDialogVisible.value = false;
  editReq(list.title, list.content, list.status, id1.value).then((r) => {
    console.log(r.data);
    todolist();
  });
}
//修改状态
function F(id, x) {
  FnReq(x, id).then((r) => {
    console.log(r.data);
    todolist();
  });
}
</script>
<style lang="scss" scoped>
.inp {
  width: 660px;
  height: 100px;
  margin-bottom: 20px;
  margin-left: 20px;
}
.cart {
  display: flex;
  line-height: 60px;
}
.c {
  margin-right: 70px;
  margin-left: 20px;
}
.c1 {
  margin-right: 70px;
}
.btn_1 {
  margin-right: 70px;
}
.btn_2 {
  width: 80px;
}
</style>
